fix(donut-chart): add externalLabelGuidesPlugin to make percentages visible#5273
fix(donut-chart): add externalLabelGuidesPlugin to make percentages visible#5273somramnani wants to merge 3 commits into
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
somramnani
added
the
do not review
|
somramnani
added
High Priority - Please Review First
mahathiganimi
left a comment
mahathiganimi
left a comment
There was a problem hiding this comment.
Tested the changes locally toggling between light and dark mode.
Found an issue: the Team Stats and Blue Square Stats cards (bottom section, "Teams and Blue Squares") do not switch to dark mode at all, they remain on a white background with dark text in both screenshots, while the cards above them (bar chart, role donut) correctly switch. The component needs to actually inherit dark mode styling before label contrast can be properly verified in that state. Could you please fix the dark mode background/text inheritance for the chart. Also another suggestion, It would be nice to have the "Total Blue Squares" text inside the inner perimeter of the chart.
2 participants
Description
Related PRS (if any):
This frontend PR is related to the backend development branch.
Main changes explained:
DonutChart.jsxto follow the Volunteer Status chart pattern by disabling crowded in-slice datalabels and using the shared external label guide plugin to display values and percentages outside the donut chart.DonutChart.jsxto also show each category’s value and percentage in the legend, so the breakdown remains visible even if external chart labels are hard to read.DonutChart.module.cssto give the donut chart more space for external labels and improve spacing between the chart and legend.How to test:
Screenshots or videos of changes: